<!--
 * @Description: 首页组件
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-02-27 13:36:12
 -->
<template>
  <div class="home" id="home" name="home">
    <!-- 轮播图 -->
    <div class="block">
      <el-carousel height="400px" >
        <el-carousel-item v-for="item in carousel" :key="item.id">
          <el-image fit="cover" style="height: 400px;width: 100%"  :src='"http://localhost:8102/upload/" + item.src' />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 轮播图END -->
    <div class="main-box">
      <div class="main">
        <div class="phone">
          <div class="box-hd">
            <div class="title">热销商品</div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <router-link to>
                <img :src="$target +'public/imgs/phone/phone.png'" />
              </router-link>
            </div>
            <div class="list">
              <MyList :list="recommendProductList" :isMore="true"></MyList>
            </div>
          </div>
        </div>

        <!-- 家电商品展示区域 -->
        <div class="appliance">
          <div class="box-hd">
            <div class="title">推荐品牌</div>
            <div class="more">
            </div>
          </div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo1.png'" />
                </li>
                <li>
                  <img :src="$target +'public/imgs/appliance/appliance-promo2.png'" />
                </li>
              </ul>
            </div>
            <div class="list">
            </div>
          </div>
        </div>
        <!-- 家电商品展示区域END -->

        <!-- 配件商品展示区域 -->
        <div class="accessory" id="promo-menu">
            <div class="title">热门分类</div>
          <div class="box-bd">
            <div class="promo-list">
              <ul>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo1.png'" alt />
                </li>
                <li>
                  <img :src="$target +'public/imgs/accessory/accessory-promo2.png'" alt />
                </li>
              </ul>
            </div>
            <div class="list">
            </div>
          </div>
        </div>
        <!-- 配件商品展示区域END -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      carousel: "", // 轮播图数据
      recommendProductList: "", // 热销商品列表
      recommendBrandList: "", // 热门品牌列表
      recommendCategoryList: "", // 推荐分类列表
    };
  },
  watch: {

  },
  created() {
    // 获取轮播图数据
    this.$axios
      .get("/api/home/carousel", {})
      .then(res => {
        this.carousel = res.data.data;
      })
      .catch(err => {
        return Promise.reject(err);
      });
    // 获取各类商品数据
    this.getPromo("商品", "recommendProductList");
    this.getPromo("品牌", "recommendBrandList");
    this.getPromo("分类", "recommendCategoryList");
  },
  methods: {
    // 获取各类商品数据方法封装
    getPromo(categoryName, val, api) {
      api = api !== undefined ? api : "/api/home/getRecommend";
      this.$axios
        .get(api, {
          params:{
            categoryName: categoryName
          }

        })
        .then(res => {
          this[val] = res.data.data;
        })
        .catch(err => {
          return Promise.reject(err);
        });
    }
  }
};
</script>
<style scoped>
@import "../assets/css/index.css";
</style>
